<template>
  <div class="right-component-edit" :style="openShutStyle">
    <div class="right-con">
      <right-select-animate v-if="selectAnimate.isActive"></right-select-animate>
      <right-select-event v-else-if="selectEvent.isActive"></right-select-event>
      <component v-else :is="currentView"></component>
    </div>
    <i v-if="siteAttrs.h5Type == H5_TYPE.canvas" class="jy-icon-preview1 open-shut-right" @click="onOpenShut"></i>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {COMPONENT_TYPES} from '@/common/const'
import { H5_TYPE } from '@/common/const-dif'
import { reactive, defineAsyncComponent } from 'vue'

const components = {
  RightPage: defineAsyncComponent(() => import('@/views/child/right/right-page.vue')),
  RightSelectAnimate: defineAsyncComponent(() => import('@/views/child/right/right-select-animate.vue')),
  RightSelectEvent: defineAsyncComponent(() => import('@/views/child/right/right-select-event.vue')),
  RightText: defineAsyncComponent(() => import('@/views/child/right/right-text.vue')),
  RightImg: defineAsyncComponent(() => import('@/views/child/right/right-img.vue')),
  RightIcon: defineAsyncComponent(() => import('@/views/child/right/right-icon.vue')),
  RightSvgIcon: defineAsyncComponent(() => import('@/views/child/right/right-svg-icon.vue')),
  RightVideo: defineAsyncComponent(() => import('@/views/child/right/right-video.vue')),
  RightAudio: defineAsyncComponent(() => import('@/views/child/right/right-audio.vue')),

  RightForm: defineAsyncComponent(() => import('@/views/child/right/right-form.vue')),
  RightFormScore: defineAsyncComponent(() => import('@/views/child/right/right-form-score.vue')),
  RightAddress: defineAsyncComponent(() => import('@/views/child/right/right-address.vue')),
  RightInput: defineAsyncComponent(() => import('@/views/child/right/right-input.vue')),
  RightBtn: defineAsyncComponent(() => import('@/views/child/right/right-btn.vue')),
  RightRadioCheckbox: defineAsyncComponent(() => import('@/views/child/right/right-radio-checkbox.vue')),
  RightDropdown: defineAsyncComponent(() => import('@/views/child/right/right-dropdown.vue')),
  RightUpload: defineAsyncComponent(() => import('@/views/child/right/right-upload.vue')),
  RightSwitch: defineAsyncComponent(() => import('@/views/child/right/right-switch.vue')),

  RightVideos: defineAsyncComponent(() => import('@/views/child/right/right-videos.vue')),
  RightImgs: defineAsyncComponent(() => import('@/views/child/right/right-imgs.vue')),
  RightTimer: defineAsyncComponent(() => import('@/views/child/right/right-timer.vue')),
  RightMenu: defineAsyncComponent(() => import('@/views/child/right/right-menu.vue')),
  RightCamera: defineAsyncComponent(() => import('@/views/child/right/right-camera.vue')),
  RightTurnBook: defineAsyncComponent(() => import('@/views/child/right/right-turn-book.vue')),
  RightScrollContainer: defineAsyncComponent(() => import('@/views/child/right/right-scroll-container.vue')),
  RightMoveable: defineAsyncComponent(() => import('@/views/child/right/right-moveable.vue')),
  RightCalendar: defineAsyncComponent(() => import('@/views/child/right/right-calendar.vue')),
  RightGraspDoll: defineAsyncComponent(() => import('@/views/child/right/right-grasp-doll.vue')),
  RightBg: defineAsyncComponent(() => import('@/views/child/right/right-bg.vue')),
  RightProcess: defineAsyncComponent(() => import('@/views/child/right/right-process.vue')),

  RightWb: defineAsyncComponent(() => import('@/views/child/right/wb/right-wb.vue')),
  RightHead: defineAsyncComponent(() => import('@/views/child/right/wb/right-head.vue')),
  
  RightFlipMc: defineAsyncComponent(() => import('@/views/child/right/wb/right-flip-mc.vue')),
  RightSlotMachine: defineAsyncComponent(() => import('@/views/child/right/wb/right-slot-machine.vue')),
  RightNoticeBar: defineAsyncComponent(() => import('@/views/child/right/wb/right-notice-bar.vue')),


  RightCommonList: defineAsyncComponent(() => import('@/views/child/right/lists/right-common-list.vue')),
  RightTable: defineAsyncComponent(() => import('@/views/child/right/lists/right-table.vue')),
  RightCarousel: defineAsyncComponent(() => import('@/views/child/right/lists/right-carousel.vue')),
  RightGroupCarousel: defineAsyncComponent(() => import('@/views/child/right/lists/right-group-carousel.vue')),

  //global
  RightIsPostEvent: defineAsyncComponent(() => import('@/views/child/right/global/right-is-post-event.vue')),

  //canvas createjs three phaser
  //createjs
  RightMc: defineAsyncComponent(() => import('@/views/canvas/createjs/right-mc.vue')),
  RightBitmapText: defineAsyncComponent(() => import('@/views/canvas/createjs/right-bitmap-text.vue')),
  
  // paper
  RightPaper: defineAsyncComponent(() => import('@/views/canvas/paper/right-paper.vue')),
  
  //pixi
  RightPixis: defineAsyncComponent(() => import('@/views/canvas/pixi/right-pixis.vue')),

  //three
  RightPanorama: defineAsyncComponent(() => import('@/views/canvas/three/right-panorama.vue')),
  RightThrees: defineAsyncComponent(() => import('@/views/canvas/three/right-threes.vue')),

  //phaser
  RightPhasers: defineAsyncComponent(() => import('@/views/canvas/phaser/right-phasers.vue')),
}

export default {
  components,
  setup () {
    const state =  reactive({
      openShutStyle: { right: 0 },
      isOPen: false,
    })
    const state_ = {
      H5_TYPE: H5_TYPE,
    }
    _.merge(state, state_)
    return state
  },
  computed: {
    ...mapState({
      componnetData: state => state.components.currentComponentData,
      page: state => state.components.currentPage,
      selectAnimate: (state) => state.selectAnimate,
      selectEvent: (state) => state.selectEvent,
      selectPageEvent: (state) => state.selectPageEvent,
      siteAttrs: state => state.components.attrs,
    }),
    currentView(){
      if(!this.page){
        return null
      }
      if(this.componnetData){
        switch(parseInt(this.componnetData.cid)){
          case COMPONENT_TYPES.wb_text:
          return 'right-text';
          case COMPONENT_TYPES.wb_img:
          return 'right-img';
          case COMPONENT_TYPES.wb_icon:
          return 'right-icon';
          case COMPONENT_TYPES.wb_svg_icon:
          return 'right-svg-icon';
          case COMPONENT_TYPES.wb_video:
          return 'right-video';
          case COMPONENT_TYPES.wb_audio:
          return 'right-audio';
          case COMPONENT_TYPES.wb_input:
          return 'right-input';
          case COMPONENT_TYPES.wb_btn:
          return 'right-btn';
          case COMPONENT_TYPES.wb_form:
          return 'right-form';
          case COMPONENT_TYPES.wb_form_score:
          return 'right-form-score';
          case COMPONENT_TYPES.wb_address:
          return 'right-address';
          case COMPONENT_TYPES.wb_upload:
          return 'right-upload';

          case COMPONENT_TYPES.wb_timer:
          return 'right-timer';

          case COMPONENT_TYPES.wb_menu:
          return 'right-menu';
          case COMPONENT_TYPES.wb_camera:
          return 'right-camera';
          case COMPONENT_TYPES.wb_turn_book:
          return 'right-turn-book';
          case COMPONENT_TYPES.wb_scroll_container:
          return 'right-scroll-container';
          case COMPONENT_TYPES.wb_moveable:
          return 'right-moveable';
          case COMPONENT_TYPES.wb_calendar:
          return 'right-calendar';
          case COMPONENT_TYPES.wb_grasp_doll:
          return 'right-grasp-doll';
          case COMPONENT_TYPES.wb_bg:
          return 'right-bg';
          case COMPONENT_TYPES.wb_process:
          return 'right-process';

          case COMPONENT_TYPES.wb_radio:
          case COMPONENT_TYPES.wb_checkbox:
          return 'right-radio-checkbox';
          case COMPONENT_TYPES.wb_dropdown:
          return 'right-dropdown';
          case COMPONENT_TYPES.wb_switch:
          return 'right-switch';
          case COMPONENT_TYPES.wb_videos:
          return 'right-videos';
          case COMPONENT_TYPES.wb_imgs:
          return 'right-imgs';

          case COMPONENT_TYPES.wb_head:
          return 'right-head';
          case COMPONENT_TYPES.wb_flip_mc:
          return 'right-flip-mc';
          case COMPONENT_TYPES.wb_slot_machine:
          return 'right-slot-machine';
          case COMPONENT_TYPES.wb_notice_bar:
          return 'right-notice-bar';

          case COMPONENT_TYPES.wb_list:
          case COMPONENT_TYPES.wb_reposts:
          case COMPONENT_TYPES.group_component:
          return 'right-wb';
          case COMPONENT_TYPES.wb_carousel:
          return 'right-carousel'
          case COMPONENT_TYPES.group_carousel:
          return 'right-group-carousel'

          case COMPONENT_TYPES.wb_common_list:
          return 'right-common-list';
          case COMPONENT_TYPES.wb_table:
          return 'right-table';
          case COMPONENT_TYPES.wb_is_post_event:
          return 'right-is-post-event';

          case COMPONENT_TYPES.wb_bitmap_text:
          return 'right-bitmap-text';
          case COMPONENT_TYPES.wb_mc:
          return 'right-mc';

          case COMPONENT_TYPES.wb_paper:
          return 'right-paper';

          case COMPONENT_TYPES.wb_pixis:
          return 'right-pixis';

          case COMPONENT_TYPES.wb_panorama:
          return 'right-panorama';
          case COMPONENT_TYPES.wb_threes:
          return 'right-threes';

          case COMPONENT_TYPES.wb_phasers:
          return 'right-phasers';

          default:
          return 'right-page';
        }
      }else{
        return 'right-page';
      }
    },
  },
  methods: {
    onOpenShut(){
      this.isOPen = !this.isOPen
      if(this.isOPen){
        this.openShutStyle.right = "-300px"
      }else{
        this.openShutStyle.right = "0"
      }
    },
  },
};
</script>
